<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>总结</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>学生信息</h1>
    <button @click="student.age++">年龄+1岁</button>
    <button @click="addSex">添加性别属性，默认值：女</button><br/>
    <button @click="student.sex='未知' ">修改性别</button><br/>
    <button @click="addFriend">在列表首位添加一位朋友</button><br/>
    <button @click="updateFirstFriendName">修改第一个好友名字为：张三</button><br/>
    <button @click="addHobby">添加爱好为：学习</button><br/>
    <button @click="updatehobby">修改第一个爱好为：上高速</button>

    <h2>姓名{{student.name}}</h2>
    <h2>年龄{{student.age}}</h2>
    <h2 v-if="student.sex">性别{{student.sex}}</h2>
    <h4>爱好{{student.hobby}}</h4>
    <ul>
        <li v-for="(x,index) in student.hobby" :key="index">
            {{x}}
        </li>
    </ul>
        <hr/>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f,index) in student.friend" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
</div>

</body>
<script type="text/javascript">
    Vue.config.productionTip=false


    const vm=new Vue({
        el:'#root',
        data:{
            student:{
                name: '楠籽',
                age:22,
                hobby:['看书','打台球','唱歌','独处'],
                friend:[
                    {name:'ken',age:34},
                    {name: 'cong',age: 31}
                ]
            },
            methods:{
                addSex(){
                   // Vue.set(this.student,'sex','女')
                    this.$set(this.student,'sex','女')
                },
                addFriend(){
                    this.student.friend.unshift({name: 'jack',age: 26})
                },
                updateFirstFriendName(){
                    this.student.friend[0].name='张三',
                    this.student.friend[0].age=54
                },
                addHobby(){
                    this.student.hobby.push('学习')
                },
                updatehobby(){
                    //this.student.hobby.splice('上高速')
                    Vue.set(this.student.hobby,0,'上高速')
                }
            }

        },
    })
</script>
</html>